<!-- CellDecimal.vue -->
<template>
  <input
      type="number"
      :value="displayValue"
      @input="handleInput"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
      class="cell-input cell-decimal"
      :step="stepValue"
  />
</template>

<script>
export default {
  name: 'CellDecimal',
  props: {
    modelValue: {
      type: [Number, String],
      default: 0
    },
    precision: {
      type: Number,
      default: 2
    }
  },
  computed: {
    displayValue() {
      return this.modelValue === null ? '' : this.modelValue;
    },
    stepValue() {
      return `0.${'0'.repeat(this.precision - 1)}1`;
    }
  },
  emits: ['update:modelValue', 'focus', 'blur'],
  methods: {
    handleInput(event) {
      const inputValue = event.target.value;
      if (inputValue === '') {
        this.$emit('update:modelValue', null);
      } else {
        const value = parseFloat(parseFloat(inputValue).toFixed(this.precision));
        this.$emit('update:modelValue', isNaN(value) ? null : value);
      }
    }
  }
}
</script>

<style scoped>
.cell-decimal {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
